<template>
	<view class="priceFormat">
		<view class="priceContent">
			<view class="priceHeader">
				<text class="priceName">价格</text>
				<text class="numName">起售</text>
			</view>

			<view class="stepPriceWrapper" v-for="item in props?.productSaleInfo?.priceRangeList" :key="item.price">
				<view class="stepPriceItem">
					<view class="priceBox">
						<text class="priceUnit"></text>
						<text class="priceText">{{ usePrice(item.price) }}</text>
					</view>
					<view class="stepUnitBox">
						<text class="unitText line1">
							{{ item.startQuantity }} {{ props?.productSaleInfo?.unitInfo?.transUnit }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
const props = defineProps({
	productSaleInfo: {
		type: Object,
	},
})
</script>
<style scoped lang="scss">
.priceFormat {
	width: 750rpx;
	background-color: #fff;

	overflow-y: hidden;
	overflow-x: auto;
}

.priceContent {
	width: auto;
	// display: flex;
	// flex-flow: row nowrap;

	display: grid;
	grid-template-columns: 300rpx 1fr 1fr 1fr;

	gap: 20rpx;
	align-items: center;
	justify-content: flex-start;
	padding: 8rpx 16rpx 12rpx;

	border-bottom-right-radius: 4rpx;
	border-bottom-left-radius: 4rpx;
}

.priceHeader {
	width: 300rpx;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.priceHeader .priceName {
	font-size: 28rpx;
	color: #999;
}

.priceHeader .numName {
	font-size: 28rpx;
	color: #999;
}

.stepPriceWrapper {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	border-top-left-radius: 12rpx;
	border-top-right-radius: 12rpx;
}

.stepPriceItem {
	min-width: 100rpx;
}

.priceBox {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	color: #ff4000;
}

.priceUnit {
	margin-right: 4rpx;
	font-size: 28rpx;
	font-weight: 500;
	line-height: 44rpx;
}

.priceText {
	font-family: Arial, Helvetica;
	font-size: 24px;
	font-weight: 500;
	line-height: 28px;
}

.stepUnitBox {
	display: flex;
	flex-direction: row;
	margin-top: 4px;
}

.unitText {
	font-size: 14px;
	line-height: 18px;
	color: #333;
}
</style>
